<template>
  <div class="addDetail">
    <div class="addPrimate" :style="{width: current === 2?'100%':''}">
      <div v-if="current === 1">
        <el-form ref="Form" :model="Form" status-icon>
          <el-form-item prop="goods_name" label="宝贝名称">
            <input v-model="Form.goods_name" placeholder="输入宝贝名称" />
          </el-form-item>
          <el-form-item prop="goods_price" label="宝贝价格" >
            <input v-model="Form.goods_price" placeholder="输入宝贝价格" />
          </el-form-item>
          <h1 class="attr">基本属性</h1>
          <el-form-item v-for="(item,index) in currentAttr" :key="index" :label="item.title">
            <input v-model="Property[item.modals]" />
          </el-form-item>
          <el-form-item prop="des" label="宝贝描述">
            <textarea v-model="Form.goods_description"/>
          </el-form-item>
          <el-form-item prop="dess" label="宝贝更新日志">
            <textarea v-model="Form.goods_updateLog" />
          </el-form-item>
        </el-form>
        <div class="buttons">
          <el-button v-if="nextButton" type="primary" @click="handleNext" :style="{width: '100px'}">下一步</el-button>
          <el-button v-if="backButton" type="primary" @click="handleBack" :style="{width: '100px'}">返回</el-button>
        </div>
      </div>
      <div v-else-if="current === 2">
        <add-pic :types="types"/>
      </div>
    </div>
  </div>
</template>

<script>
import AddPic from './addPic';
import { mapMutations, mapState, mapActions } from 'vuex';
import axios from 'axios'
export default {
  name: 'AddPrimate',
  components: {
    AddPic
  },
  props: {
    backButton: {
      type: Boolean,
      default: false
    },
    nextButton: {
      type: Boolean,
      default: true
    },
    types: {
      type: String
    },
    current: {
      type: Number,
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      Form: state => state.shop.Form,
      Property: state => state.shop.Property,
    }),
    currentAttr () {
      let arr = [];
      Object.keys(this.GoodDetail).forEach(key => {
        if (key === this.types) {
          arr = this.GoodDetail[key];
        }
      });
      return arr;
    },
    currentType(){
      switch(this.types){
        case '模板':
          return 1;
        case '组件':
          return 2;
        case '图片':
          return 3;
        case '图标':
          return 4;
        case 'sdk':
          return 5;
      }
      return false;
    },
    currentProperty(){
      const arr = [];
      this.currentAttr.forEach(item => {
        arr.push({
          property_id: item.property_id,
          propertyValue_name: this.Property[item.modals]
        });
      })
      return arr;
    },
  },
  data () {
    return {
      goodUrl: '',
      GoodDetail: {
        '模板': [
          {
            title: '版本',
            property_id: 1,
            modals: 'template_version'
          },
          {
            title: '类型',
            property_id: 2,
            modals: 'template_type'
          },
          {
            title: '引导',
            property_id: 3,
            modals: 'template_lead'
          },
          {
            title: '布局',
            property_id: 4,
            modals: 'template_display'
          }
        ],
        '组件': [
          {
            title: '版本',
            property_id: 5,
            modals: 'component_version'
          },
          {
            title: '类型',
            property_id: 6,
            modals: 'component_type'
          },
          {
            title: '引导',
            property_id: 7,
            modals: 'component_lead'
          },
          {
            title: '布局',
            property_id: 8,
            modals: 'component_display'
          }
        ],
        '图片': [
          {
            title: '模式',
            property_id: 9,
            modals: 'pictrue_mode'
          },
          {
            title: '尺寸',
            property_id: 10,
            modals: 'pictrue_ec'
          },
          {
            title: '大小',
            property_id: 11,
            modals: 'pictrue_size'
          },
          {
            title: '格式',
            property_id: 12,
            modals: 'pictrue_format'
          },
        ],
        '图标': [
          {
            title: '模式',
            property_id: 13,
            modals: 'icon_mode'
          },
          {
            title: '类型',
            property_id: 14,
            modals: 'icon_type'
          },
          {
            title: '数量',
            property_id: 15,
            modals: 'icon_number'
          },
          {
            title: '格式',
            property_id: 16,
            modals: 'icon_format'
          },
        ],
        'sdk': [
          {
            title: '类型',
            property_id: 17,
            modals: 'sdk_type'
          },
          {
            title: '设备',
            property_id: 18,
            modals: 'sdk_drive'
          },
          {
            title: '大小',
            property_id: 19,
            modals: 'sdk_size'
          },
          {
            title: '版本',
            property_id: 20,
            modals: 'sdk_version'
          },
        ],
      },
      Rules: {
        goods_name: [
          { required: true, message: '请输入您的手机号', trigger: 'change' },
        ],
        goods_price: [
          { required: true, message: '请输入您的邮箱', trigger: 'change' },
        ]
      },
    };
  },
  methods: {
    ...mapMutations({
      handleVisible: 'saveVisible'
    }), 
    ...mapActions(['fetchSetGoods','fetchSetGoodsFile','fetchSetGoodsContent','fetchSetGoodsTitle','fetchUpdateGoods']),
    handleBack () {
      this.$emit('back');
    },
    handleNext () {
      //addTemplate获得你填的Form数据
      this.Form.goods_id = this.$route.query.goods_id;
      this.Form.type_id = this.currentType;
      this.Form.shop_id = this.userInfo.shop_id,
      this.Form.propertyValueItemReqVOList = this.currentProperty;
      this.$emit('next', this.Form);
      this.$emit('changeCurrent',{ type: this.types , current: this.current+1 });
      this.currentDiv = this.currentDiv + 1;
      this.fetchSetGoods(this.Form);
    }
  },
}
</script>
<style lang='scss' scoped src="./index.scss"/>
<style lang="scss">
.addDetail {
  .el-form {
    .attr {
      width: 100px;
      text-align: center;
      margin-bottom: 10px;
    }
    .el-form-item__content {
      input,textarea {
        width: 100%;
        border: 1px solid #aaa;
        font-size: 15px;
        padding-left: 15px;
        &:focus{
          border: 1px solid $theme-color;
          box-shadow: 0 0 0px 2px $theme-rgba-1;
        }
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #888;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: $theme-color;
    .el-icon-plus:before {
      color: $theme-color;
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;  
  }
}
</style>